<template>
  <div class="container">

    <!-- 面包屑导航 -->
    <navbar></navbar>
    <div class="content page-title">
      <h2>商品数据看板</h2>
    </div>

    <div class="content table-content">
      <div class="table-content-item">

        <div class="table-content-item-side">
          <h3 class="card-title">
            <label>
              商品销量订单
              <el-tooltip class="item" effect="dark" content="已发货之后的，不含退货，退款" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </label>
            <span class="top-mark"><i>TOP10</i></span>
            <div class="staff-button-list">
              <el-button size="small" @click="onDownload('topOrder')" class="download-table"
                         icon="el-icon-download"></el-button>
              <!--            <el-button size="small" @click="onDownloadStaff()" class="download-table">&#8595;</el-button>-->
            </div>
          </h3>

          <search-com-company class="search-company" :type="topOrder.type"
                              :dateArr="topOrder.dateArr"
                              @outputSearchData="receiveSearchData"></search-com-company>
          <div id="top-order">
            <top-sale v-loading="topOrder.loading" documentId="top-order" :config="topOrder.config" :dataList="topOrder.dataList"></top-sale>
          </div>
        </div>
        <div class="table-content-item-side">
          <h3 class="card-title">
            <label>
              各类目的销售情况
              <el-tooltip class="item" effect="dark" content="统计商品不含赠品" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </label>
            <div class="staff-button-list">
              <el-button size="small" @click="onDownload('categorySales')" class="download-table"
                         icon="el-icon-download"></el-button>
            </div>
          </h3>
          <search-com-company class="search-company" :type="categorySales.type"
                              :dateArr="categorySales.dateArr"
                              @outputSearchData="receiveSearchData"></search-com-company>
          <data-board-table v-loading="categorySales.loading" :dataList="categorySales.list" :config="categorySales.config"
                            :sortObj="categorySales.sortObj"></data-board-table>

        </div>
      </div>
      <div class="table-content-item">
        <div class="table-content-item-side">
          <h3 class="card-title">
            <label>商品销售量
              <el-tooltip class="item" effect="dark" content="已发货之后的，不含退货，退款" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </label>
            <span class="top-mark"><i>TOP10</i></span>
            <div class="staff-button-list">
              <el-button size="small" @click="onDownload('amount')" class="download-table"
                         icon="el-icon-download"></el-button>
              <!--            <el-button size="small" @click="onDownloadStaff()" class="download-table">&#8595;</el-button>-->
            </div>
          </h3>
          <search-com-company class="search-company" :type="amount.type"
                              :dateArr="amount.dateArr"
                              @outputSearchData="receiveSearchData"></search-com-company>
          <div id="amount">
            <top-sale documentId="amount" v-loading="amount.loading" :config="amount.config" :dataList="amount.dataList"></top-sale>
          </div>
        </div>
        <div class="table-content-item-side" v-loading="productOrderCancellation.loading">
          <h3 class="card-title"><label>各商品订单取消、退货退款概况</label>
            <div class="staff-button-list">
              <el-button size="small" @click="onDownload('productOrderCancellation')" class="download-table"
                         icon="el-icon-download"></el-button>
            </div>
          </h3>
          <search-com-company class="search-company" :type="productOrderCancellation.type"
                              :dateArr="productOrderCancellation.dateArr"
                              @outputSearchData="receiveSearchData"></search-com-company>
          <data-board-table class="product-order-cancellation" v-loading="productOrderCancellation.loading" :dataList="productOrderCancellation.list"
                            :config="productOrderCancellation.config"
                            :sortObj="productOrderCancellation.sortObj"></data-board-table>
          <!-- 各商品订单取消、退货退款概况 分页start -->
          <div class="page" v-if="productOrderCancellation.page.totalNum >= 11">
            <el-pagination
                background
                @size-change="goodsRefundSizeChange"
                @current-change="goodsRefundCurrentChange"
                :current-page="productOrderCancellation.page.pageNo"
                :pager-count="5"
                :page-sizes="[3, 5, 10, 20, 50]"
                :page-size="productOrderCancellation.page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="productOrderCancellation.page.totalNum"
            >
            </el-pagination>
          </div>
          <!-- 各商品订单取消、退货退款概况 分页end -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import SearchComCompany from './components/SearchComCompany.vue'
import BasicData from './components/BasicData.vue'
import TotalSales from './components/TotalSales.vue'
import DataBoardTable from './components/DataBoardTable.vue'
import Distribution from './components/Distribution.vue'
import Comparison from './components/Comparison.vue'
import TopSale from './components/TopSale.vue'
import dataBoardCommon from './mixins/dataBoardCommon'

export default {
  mixins: [dataBoardCommon],
  components: { navbar, SearchComCompany, BasicData, TotalSales, Distribution, DataBoardTable, Comparison, TopSale },
  data () {
    return {
      loading: false,
      page: { list: [], pageNo: 1, pageSize: 8, totalNum: 0, currentPage: 1 },

      imageArr: [], // 列表有图片时使用
      categorySales: { // 各类目的销售情况
        loading: false,
        title: '各类目的销售情况',
        type: 'categorySales',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        sortObj: { prop: 'buyCount', order: 'descending' }, // 排序
        config: [
          { type: 'index', label: '序号', width: 60 },
          { prop: 'catName', label: '商品一级类目' },
          { prop: 'buyCount', label: '购买次数', sortable: true },
          { prop: 'buyUserCount', label: '购买人数', sortable: true },
          { prop: 'saleAmount', label: '销售额', slot: 'money', sortable: true }
        ],
        list: []
      },
      productOrderCancellation: { // 各商品订单取消、退货退款概况
        loading: false,
        title: '各商品订单取消、退货退款概况',
        type: 'productOrderCancellation',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
        sortObj: { prop: 'refundCount', order: 'descending' }, // 排序
        config: [
          { type: 'index', label: '序号', width: 60 },
          { prop: 'goodsName', label: '商品名称', align: 'left' },
          { prop: 'cancelCount', label: '取消订单数', fixWidth: 130, sortable: true },
          { prop: 'refundCount', label: '客户退货退款数', fixWidth: 160, sortable: true }
        ],
        list: []
      },
      topOrder: { // 商品销量订单 Top10
        loading: false,
        title: '商品销量订单 Top10',
        type: 'topOrder',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        config: { color: '#4368e6' },
        dataList: []
      },
      amount: { // 商品销售量
        loading: false,
        title: '商品销售量',
        type: 'amount',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        config: { color: '#14D8CB' },
        dataList: []
      },
      screenWidth: document.body.clientWidth,
      orderAmount: { // 下单金额分布占比
        config: {
          color: ['#4168e7', '#14d8cb', '#1ccf79', '#ffd83b', '#f65570', '#9850fc']
        },
        dataList: [
          { value: 422, name: '360元以上' },
          { value: 335, name: '315-360元' },
          { value: 310, name: '270-315元' },
          { value: 265, name: '220-270元' },
          { value: 215, name: '180-220元' },
          { value: 152, name: '0-180元' }
        ]
      },
      contrastPeople: { // 新老客户人数比
        config: {},
        dataList: [
          { value: 353, name: '新客户', color: '#4168e7' },
          { value: 205, name: '老客户', color: '#14d8cb' }
        ]
      },
      contrastMoney: { // 新老客户购买金额对比
        config: {},
        dataList: [
          { value: 633, name: '新客户', color: '#4168e7' },
          { value: 735, name: '老客户', color: '#14d8cb' }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(_ => {
      console.log('mounted this.$nextTick')
      // this.baseDataInit() // 基础数据初始化 格式
    })
  },
  created () {
    this.fetchDefaultData() // // 获取默认数据
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },
  activated () {
    // this.brandSelect();
    // this.brandSelectBox();
  },
  watch: {
    /* 监听*/
    screenWidth (val) {
      this.screenWidth = val
      console.log('this.screenWidth', this.screenWidth)
      this.windowOnresize()
    }
  },
  methods: {
    // 获取默认数据
    fetchDefaultData () {
      this.getDataGoodsCategory(true) // 各类目的销售情况
      this.getDataGoodsRefund(true) // 各商品订单取消、退货退款概况
      this.getDataGoodsCountOrder(true) // 商品销量订单 Top10
      this.getDataGoodsCount(true) // 商品销售量
    },
    // 各类目的销售情况
    getDataGoodsCategory (isDefault, dateArr, orgCodeArrStr) {
      if (isDefault || dateArr) {
        this.categorySales.loading = true
      } else {
        return
      }
      this.categorySales.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.categorySales.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.categorySales.dateArr = this.chooseDateTime(dateArr)
        if (this.categorySales.dateArr[0].indexOf('undefined') > -1) {
          this.categorySales.dateArr = this.defaultDateTime(days)
        }
        days = this.categorySales.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.categorySales.dateArr[0],
        endTime: this.categorySales.dateArr[1],
        orgCode: this.categorySales.orgCode
      }
      this.$api.dataGoodsCategory(params).then((res) => {
        this.categorySales.loading = false
        if (res.code === 0) {
          const resData = res.data
          // console.log(resData)
          resData.forEach(item => {
            item.buyCount = Number(item.buyCount)
            item.buyUserCount = Number(item.buyUserCount)
            item.saleAmount = Number(item.saleAmount)
            item.moneyFormat = this.formatNumber(item.saleAmount, 2)
          })
          this.categorySales.list = resData
        }
      }).catch((err) => {
        this.categorySales.loading = false
        console.log(err)
      })
    },
    // 各商品订单取消、退货退款概况
    getDataGoodsRefund (isDefault, dateArr, orgCodeArrStr) {
      if (isDefault || dateArr) {
        this.productOrderCancellation.loading = true
      } else {
        return
      }
      this.productOrderCancellation.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.productOrderCancellation.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.productOrderCancellation.dateArr = this.chooseDateTime(dateArr)
        if (this.productOrderCancellation.dateArr[0].indexOf('undefined') > -1) {
          this.productOrderCancellation.dateArr = this.defaultDateTime(days)
        }
        days = this.productOrderCancellation.dateArr[2]
      }
      const params = {
        pageNo: this.productOrderCancellation.page.pageNo, pageSize: this.productOrderCancellation.page.pageSize,
        startTime: this.productOrderCancellation.dateArr[0],
        endTime: this.productOrderCancellation.dateArr[1],
        orgCode: this.productOrderCancellation.orgCode
      }
      this.$api.dataGoodsRefund(params).then((res) => {
        this.productOrderCancellation.loading = false
        const resData = res.data.list
        resData.forEach(item => {
          item.refundCount = this.formatNumber(item.refundCount, 0)
        })
        this.productOrderCancellation.page.totalNum = res.data.totalNum
        this.productOrderCancellation.list = resData
      }).catch((err) => {
        this.productOrderCancellation.loading = false
        console.log(err)
      })
    },
    // ****************** 各商品订单取消、退货退款概况 翻页 ******************
    goodsRefundCurrentChange (currentChange) {
      this.productOrderCancellation.page.pageNo = currentChange
      this.getDataGoodsRefund(false, this.productOrderCancellation.dateArr, this.productOrderCancellation.orgCode)
      console.log(currentChange, '各商品订单取消、退货退款概况')
    },
    goodsRefundSizeChange (sizeChange) {
      this.productOrderCancellation.page.pageNo = 1
      this.productOrderCancellation.page.currentPage = 1
      this.productOrderCancellation.page.pageSize = sizeChange
      this.getDataGoodsRefund(false, this.productOrderCancellation.dateArr, this.productOrderCancellation.orgCode)
    },
    // ****************** 各商品订单取消、退货退款概况 翻页 end ******************
    // 商品销量订单 Top10
    getDataGoodsCountOrder (isDefault, dateArr, orgCodeArrStr) {
      if (isDefault || dateArr) {
        this.topOrder.loading = true
      } else {
        return
      }
      this.topOrder.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.topOrder.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.topOrder.dateArr = this.chooseDateTime(dateArr)
        if (this.topOrder.dateArr[0].indexOf('undefined') > -1) {
          this.topOrder.dateArr = this.defaultDateTime(days)
        }
        days = this.topOrder.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.topOrder.dateArr[0],
        endTime: this.topOrder.dateArr[1],
        orgCode: this.topOrder.orgCode
      }
      this.$api.dataGoodsCountOrder(params).then((res) => {
        this.topOrder.loading = false
        if (res.code === 0) {
          const columArr = res.data.colum
          const valueArr = res.data.value
          const tempArr = []
          if (!columArr) {
            return this.$message.warning('没有关相数据！')
          }
          columArr.forEach((item, index) => {
            tempArr.push({ label: item, value: valueArr[index] })
          })
          this.topOrder.dataList = tempArr
        }
      }).catch((err) => {
        this.topOrder.loading = false
        console.log(err)
      })
    },
    // 商品销售量 Top10
    getDataGoodsCount (isDefault, dateArr, orgCodeArrStr) {
      if (isDefault || dateArr) {
        this.amount.loading = true
      } else {
        return
      }
      this.amount.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.amount.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.amount.dateArr = this.chooseDateTime(dateArr)
        if (this.amount.dateArr[0].indexOf('undefined') > -1) {
          this.amount.dateArr = this.defaultDateTime(days)
        }
        days = this.amount.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.amount.dateArr[0],
        endTime: this.amount.dateArr[1],
        orgCode: this.amount.orgCode
      }
      this.$api.dataGoodsCount(params).then((res) => {
        this.amount.loading = false
        if (res.code === 0) {
          const columArr = res.data.colum
          const valueArr = res.data.value
          const tempArr = []
          if (!columArr) {
            return this.$message.warning('没有关相数据！')
          }
          columArr.forEach((item, index) => {
            tempArr.push({ label: item, value: valueArr[index] })
          })
          this.amount.dataList = tempArr
        }

      }).catch((err) => {
        this.amount.loading = false
        console.log(err)
      })
    },
    baseDataInit () { // 基础数据初始化 格式
      const baseDataList = this.baseDataList
      const formatNumberFun = this.formatNumber
      baseDataList.forEach((item, index) => {
        this.baseDataList[index].totalNumber = formatNumberFun(item.totalNumber, 2)
      })
    },
    onDownload (type) {
      this.loading = true
      let downloadFun, params = {}
      switch (type) {
        case 'categorySales': // 各类目的销售情况
          console.log('各类目的销售情况')
          downloadFun = this.$api.dataGoodsCategoryExport
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.categorySales.dateArr[0],
            endTime: this.categorySales.dateArr[1],
            orgCode: this.categorySales.orgCode
            // orgCode: 'DT374265477'
          }
          break
        case 'productOrderCancellation': // 各商品订单取消、退货退款概况
          console.log('各商品订单取消、退货退款概况')
          downloadFun = this.$api.dataGoodsRefundExport
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.productOrderCancellation.dateArr[0],
            endTime: this.productOrderCancellation.dateArr[1],
            orgCode: this.productOrderCancellation.orgCode
            // orgCode: 'DT374265477'
          }
          break
        case 'topOrder': // 商品销量订单 Top10
          console.log('商品销量订单 Top10')
          downloadFun = this.$api.dataGoodsCountOrderExport
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.topOrder.dateArr[0],
            endTime: this.topOrder.dateArr[1],
            orgCode: this.topOrder.orgCode
            // orgCode: 'DT374265477'
          }
          break
        case 'amount': // 商品销售量
          console.log('商品销售量')
          downloadFun = this.$api.dataGoodsCountExport
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.amount.dateArr[0],
            endTime: this.amount.dateArr[1],
            orgCode: this.amount.orgCode
            // orgCode: 'DT374265477'
          }
          break
        default:
          console.log('onDownload')
      }
      downloadFun(params).then((res) => {
        if (res.code === 0) {
          this.downloadlink(res.data)
        }
        this.loading = false
      }).catch((err) => {
        console.log(err)
        this.loading = false
      })
    },
    setElTable () { // 设置表格宽高
      const sWidth = this.screenWidth
      // console.log( sWidth )
      this.elTable.height = parseInt(sWidth / 3)
      /*
      if(sWidth > 1900){
        this.elTable.height = 800
      } else if (sWidth > 1600) {
        this.elTable.height = 800
      } else if (sWidth > 1200) {
        this.elTable.height = 600
      } else if (sWidth > 600) {
        this.elTable.height = 400
      }
      */
      // this.elTable.height = getScreenWidth
    }
  }
}
</script>

<style scoped lang="scss">
@import './assets/DataCoardCommon';

///deep/ .el-table th > .cell { text-align: unset; }
template {
  display: block;
}

h2 {
  position: relative;
  margin-bottom: 21px;
  padding-left: 11px;

  &:before {
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    content: '';
    width: 4px;
    height: 17px;
    background-color: #2d7edf;
  }
}

.page-title {
  margin-bottom: 20px !important;

  h2 {
    border-bottom: none !important;
  }
}

.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
  //background-color: #ecf5ff;
}

/deep/ .el-table__body-wrapper .el-table__row .el-table__cell:first-child .cell {
  //color: #4168E7;
}


.el-table__row {
  .el-table__cell {
    .cell {
      padding-left: 12px;
      padding-right: 12px;

      .el-image {
        width: 100px;
        height: 70px;
        overflow: hidden;

        /deep/ img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

.table-content-item {
  width: calc(50% - 20px);
  background-color: rgba(0, 0, 0, 0);
  padding: 0 !important;
  margin-left: 0;
  margin-right: 0;

  .table-content-item-side {
    width: calc(100% - 30px);
    background-color: #ffffff;
    padding: 20px !important;
    border-radius: 5px;

    &:first-child {
      //padding-right: 10px;
      margin-bottom: 20px;
    }

    &:last-child {
      //padding-left: 10px;
    }
  }

  &:first-child {
    padding-right: 10px !important;
    margin-bottom: 20px;
  }

  &:last-child {
    padding-left: 10px !important;
  }
}

.page {
  text-align: right;
  width: 100%;
  margin-top: 10px;
  //background: #f5f5f5;
  //padding-right: 20px;
  //position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  //::v-deep .el-pagination {
  //  display: inline-block;
  //  vertical-align: middle;
  //}
  //::v-deep .el-pagination.is-background .btn-next, ::v-deep .el-pagination.is-background .btn-prev, ::v-deep .el-pagination.is-background .el-pager li{
  //  background-color: #FFFFFF;
  //  border: 1px solid #D9D9D9;
  //  border-radius: 4px;
  //}
  //::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
  //  background-color: #409EFF;
  //  color: #FFF;
  //}
}

//各商品订单取消、退货退款概况
.product-order-cancellation {
  ::v-deep .el-table__header-wrapper, ::v-deep .el-table__body-wrapper {
    .el-table__cell {
      &:nth-child(2) {
        //width: 120px !important;
        //background-color: #2D7EDF;
        .cell{
          text-align: start;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
      &:nth-child(3), &:nth-child(4) {
        //width: 120px !important;
        //background-color: #2D7EDF;
        .cell{ text-align: right }
      }
    }
  }
}
</style>
